<template>
	<el-container class="page-user">
		<el-aside style="width: 240px;">
			<el-container>
				<el-header style="height: auto;display: block;">
					<div class="user-info-top">
						<el-avatar :size="70" :src="user.fileFullPath" @click="avatarVisible = true" :key="avatar"></el-avatar>
						<h2>{{ user.employeeName }}</h2>
						<p><el-tag effect="dark" round >点击头像可更改</el-tag></p>
					</div>
				</el-header>
				<el-main class="nopadding">
					<el-menu class="menu" :default-active="page">
						<el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
							<el-menu-item v-for="item in group.list" :key="item.component" :index="item.component"
								@click="openPage">
								<el-icon v-if="item.icon">
									<component :is="item.icon" />
								</el-icon>
								<template #title>
									<span>{{ item.title }}</span>
								</template>
							</el-menu-item>
						</el-menu-item-group>
					</el-menu>
				</el-main>
			</el-container>
		</el-aside>
		<el-main>
			<component :is="page" />
		</el-main>
	</el-container>
	<el-dialog v-model="avatarVisible" center title="修改头像">
		<div style="text-align: center;">
		<tsUpload  @updateFile="updateFile" :imageUrl="image"></tsUpload>
	</div>
		<template #footer>
			<el-button  type="primary" @click="uploadAvatar">确 定</el-button>
		</template>
	</el-dialog>
</template>

<script setup>

</script>

<script>
import { defineAsyncComponent } from 'vue'
import tsUpload from '@/components/tsUpload/file.vue'
import Api from '@/api/model/auth.js'
import store from '@/store/index.js'
import tool from '@/utils/tool'

export default {
	name: 'userCenter',
	components: {
		account: defineAsyncComponent(() => import('./user/account.vue')),
		seting: defineAsyncComponent(() => import('./user/seting.vue')),
		pushSettings: defineAsyncComponent(() => import('./user/pushSettings.vue')),
		password: defineAsyncComponent(() => import('./user/password.vue')),
		space: defineAsyncComponent(() => import('./user/space.vue')),
		logs: defineAsyncComponent(() => import('./user/logs.vue')),
		upToEnterprise: defineAsyncComponent(() => import('./user/upToEnterprise.vue')),
		tsUpload
	},
	data() {
		return {
			menu: [
				{
					groupName: "基本设置",
					list: [
						{
							icon: "el-icon-postcard",
							title: "账号信息",
							component: "account"
						},
						{
							icon: "el-icon-lock",
							title: "密码",
							component: "password"
						}
					]
				},
			],
			user: {},
			page: "account",
			image:{},
			file:'',
			avatarVisible:false,
			avatar:0
		}
	},
	//路由跳转进来 判断from是否有特殊标识做特殊处理
	beforeRouteEnter(to, from, next) {
		next((vm) => {
			if (from.is) {
				//删除特殊标识，防止标签刷新重复执行
				delete from.is
				//执行特殊方法
				vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
					type: 'success',
					center: true
				}).then(() => { }).catch(() => { })
			}
		})
	},
	mounted(){
		this.user = this.$TOOL.data.get("USER_INFO");
		this.image = {
			name:'用户头像.png',
			url:this.user.fileFullPath
		}
	},
	methods: {
		openPage(item) {
			this.page = item.index
		},
		updateFile(val){
			this.file = val 
		},
		async uploadAvatar(){
			let res  = await Api.avatar.post({
				bean:{
					file:this.file
				}
			})
			if(res.code == 200){
				this.user.fileFullPath = res.data
				this.avatar+=1
				store.commit("SET_userNameF",tool.random.getRandomId())
				tool.data.set("USER_INFO",this.user)
				this.avatarVisible = false
			}
		}

	}
}
</script>
